<template>
  <div class="ai-table ai-table-base">
    <el-card shadow="never" class="header-box"><header-left></header-left></el-card>
    <el-card shadow="never" class="search-box">
      <h2 class="search-title">查询</h2>
      <div class="search-content">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="关键词">
            <el-input v-model="searchForm.keyword" placeholder="请输入关键词" />
          </el-form-item>
        </el-form>
        <div class="search-btn">
          <el-button type="primary" @click="search" size="small">查询</el-button>
          <el-button @click="reset" size="small">重置</el-button>
          <!-- <el-button type="success" @click="openDialog()">新增</el-button> -->
        </div>
      </div>
    </el-card>


    <div class="ai-table-content">
      <el-card shadow="never" class="ai-table-content01">
        <el-table :data="tableDataA" stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="callee" label="被叫号码" width="120"></el-table-column>
          <el-table-column label="风险评级" prop="riskLevel" width="120"></el-table-column>
          <el-table-column prop="type" label="诈骗类型"></el-table-column>
          <el-table-column prop="hanguptime" label="接通时间"></el-table-column>
          <el-table-column prop="answertime" label="挂断时间"></el-table-column>
          <el-table-column label="操作" width="120" class-name="table-btn-box">
            <template #default="scope">
              <!-- <el-link @click="$emit('detail', scope.row)">查看详情</el-link> -->
              <el-button size="mini" @click="handleDetailA(scope.row)" type="text">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :page-size="loadTableA.pageSize"
          :current-page.sync="loadTableA.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :total="loadTableA.total"
          @size-change="handleSizeChangeA"
          @current-change="handleCurrentChangeA"
          style="margin-top: 20px; text-align: right;"
        />
      </el-card>

      <el-card shadow="never" class="ai-table-content02">
        <el-table :data="tableDataB" stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="keyword" label="关键词" />
          <el-table-column prop="score" label="得分"/>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next, total"
          :page-size="loadTableB.pageSize"
          :current-page.sync="loadTableB.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :total="loadTableB.total"
          @size-change="handleSizeChangeB"
          @current-change="handleCurrentChangeB"
          style="margin-top: 20px; text-align: right;"
        />
      </el-card>
    </div>

    <ChatDetailDialog
      :visible="detailDialogVisible"
      @update:visible="val => detailDialogVisible = val"
      :title="detailDialogTitle"
      :dialogData="detailDialogData"
      :riskKeyword="riskKeyword"
    />
  </div>
</template>

<script>
import headerLeft from '@/components/headerLeft/headerLeft.vue'
import aiApi from "@/api/ai.api";
import ChatDetailDialog from '@/components/aiChatDialog/aiChatDialog.vue';

export default {
  components: {
    ChatDetailDialog,
    headerLeft
  },
  data() {
    return {
      searchForm: {
        keyword: ''
      },
      dialogVisible: false,
      dialogTitle: '新增',
      editForm: {
        id: null,
        name: '',
        phone: '',
        idNumber: '',
        fraudType: ''
      },
      selectedRows: [],
      currentPage: 1,
      pageNum: 1,
      pageSize: 5,
      tableDataA: [],
      loadTableA: {
        pageNum: 1,
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableDataB: [],
      loadTableB: {
        pageNum: 1,
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      detailDialogTitle: '',
      detailDialogVisible: false,
      detailDialogData: null,
      riskKeyword: ''
    }
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    }
  },
  created () {
    this._loadTableA()
    this._loadTableB()
  },
  methods: {
    search() {
      console.log('搜索条件：', this.searchForm)
      this._loadTableA(this.searchForm)
      // 模拟搜索逻辑
    },
    reset() {
      this.searchForm = {
        keyword: ''
      }
    },
    handleDetailA(row) {
      this.detailDialogTitle = `${row.callee}呼叫详情`
      this.riskKeyword = row.riskKeyword

      this.detailDialogData = JSON.parse(row.talkinfo).dialogs
      this.detailDialogVisible = true
    },
    openDialog(row) {
      if (row) {
        this.dialogTitle = '编辑'
        this.editForm = Object.assign({}, row)
      } else {
        this.dialogTitle = '新增'
        this.editForm = {
          id: null,
          name: '',
          phone: '',
          idNumber: '',
          fraudType: ''
        }
      }
      this.dialogVisible = true
    },
    saveData() {
      if (this.editForm.id != null) {
        const index = this.tableData.findIndex(item => item.id === this.editForm.id)
        if (index !== -1) {
          this.$set(this.tableData, index, Object.assign({}, this.editForm))
        }
      } else {
        this.editForm.id = Date.now()
        this.tableData.push(Object.assign({}, this.editForm))
      }
      this.dialogVisible = false
    },
    handleDelete(row) {
      this.tableData = this.tableData.filter(item => item.id !== row.id)
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    // 表A分页逻辑
    handleSizeChangeA(size) {
      console.log('????')
      this.loadTableA.pageSize = size;
      this.loadTableA.currentPage = 1;
      this._loadTableA(); // 重新加载数据
    },
    handleCurrentChangeA(page) {
      this.loadTableA.pageNum = page
      this.loadTableA.currentPage = page;
      this._loadTableA(); // 重新加载数据
    },

    // 表B分页逻辑
    handleSizeChangeB(size) {
      this.loadTableB.pageSize = size;
      this.loadTableB.currentPage = 1;
      this._loadTableB(); // 重新加载数据
    },
    handleCurrentChangeB(page) {
      this.loadTableB.pageNum = page
      this.loadTableB.currentPage = page;
      this._loadTableB(); // 重新加载数据
    },
    async _loadTableA(extraData = {}) {
      const params = {
        pageNum: this.loadTableA.pageNum,
        pageSize: this.loadTableA.pageSize,
        ...extraData
      }
      try {
        const response = await aiApi.connectList(params);
        this.tableDataA = response.content.rows
        this.loadTableA.total = response.content.total
        console.log(this.tableDataA )
        // console.log(response.content)
        // return Array.isArray(response.content.rows) ? response.content.rows : [];
      } catch (error) {
        console.error('loadTableA调用失败：', error);
        this.$message?.error('获取loadTableA失败');
        return [];
      }
    },
    async _loadTableB() {
      const params = {
        pageNum: this.loadTableB.pageNum,
        pageSize: this.loadTableB.pageSize
      }
      try {
        const response = await aiApi.keywordList(params);
        this.tableDataB = response.content.rows
        this.loadTableB.total = response.content.total
        console.log(response.content)
        // return Array.isArray(response.content.rows) ? response.content.rows : [];
      } catch (error) {
        console.error('loadTableB调用失败：', error);
        this.$message?.error('获取loadTableB失败');
        return [];
      }
    }
  }
}
</script>

<style lang="stylus">
@import '../../assets/css/aiTableEle.styl'

.ai-table-base{
  box-sizing: border-box;
  height: 100%;
  background: #F2F3F5;
  padding: 20px;
  overflow: auto;
  .header-box{
    position: relative;
    margin-bottom: 10px;
  }
  .search-box{
    margin-bottom: 10px;
    border: 0 none;
  }
  .search-title{
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .search-content{
    display: flex;
    justify-content: space-between;
    margin-bottom: -15px;
  }
  .search-form{
    // margin-right: 20px;
    position: relative;
    // width: 90%;
    flex: 1;
    &::after{
      content: "";
      position: absolute;
      width: 1px;
      height: calc(100% - 15px);
      background: #F2F3F5;
      right: 0px;
      top: 0;
      // transform: translateY(-50%);
    }
  }
  .el-form-item{
    margin-bottom: 15px;
  }
  .search-btn{
    width: 60px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 15px;
    .el-button--primary{
      background: #1461a7;
      opacity: 0.8;
      border: 0 none;
      &:hover{
        opacity: 1;
      }
    }
    .el-button{
      // margin-left: 0;
      margin: 5px 0;
    }

  }
}
.app-container {
}

.ai-table-content{
  display: flex;
  .ai-table-content01,
  .ai-table-content02{
    .el-card__body{
      display: flex;
      flex-direction: column;
    }
    
  }
  .ai-table-content01{
    width: calc(80% - 20px);
    margin-right: 20px;
  }
  .ai-table-content02{
    width: 20%;
  }
  .table-btn-box{
    .cell {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .el-button{
      margin-left: 0;
      color: #1461a7;
      opacity: 0.8;
      &:hover{
        opacity: 1;
      }
    }
  }

  .el-card__body{
    position: relative;
    // padding-bottom: 70px;
  }

  .el-pagination{
    .el-pager li.active{
      background: #1461a7 !important;
    }
    .el-pager li{
      background: rgba(20, 97, 167, 0.5) !important;
    }
    .btn-prev, .btn-next{
      background: #1461a7 !important;
    }
  }
  .el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.disabled{
    // color: #C0C4CC !important;
    opacity: 0.1;
  }
}
</style>
